<template>
    <div id="myChart" :style="{width: '1000px', height: '600px'}"></div>
</template>
<script>

    import axios from 'axios'
    export default {
        name: 'Echarts',
        mounted(){
            let _this=this
            axios.get('http://localhost:8888/getAll').then(function (response) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = _this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '最高分对比',
                        subtext: '数据来自bilibili'
                    },
                    xAxis: {
                        type: 'category',
                        data: response.data.type
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: response.data.max,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                //这里是重点
                                color: function(params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                    var index;
                                    //给大于颜色数量的柱体添加循环颜色的判断
                                    if (params.dataIndex >= colorList.length) {
                                        index = params.dataIndex - colorList.length;
                                        return colorList[index];
                                    }
                                    return colorList[params.dataIndex];
                                }
                            }
                        }
                    }]
                });
            })

        }
    }
</script>